1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
|
import { GetServerSideProps } from "next";
import "../../app/globals.css";
import TitleBar from "../../components/TitleBar/TitleBar";
import { ChannelCard } from "@/components/channel-card";
import DataChart from "@/components/DataChart/DataChart";
import Footer from "@/components/Footer/Footer";
import Head from 'next/head'
import { channel } from "diagnostics_channel";
interface ChannelDataProp {
channel_id: string;
channel_name: string;
profile_pic: string;
subscribers: number;
sub_org: string;
video_count: number;
next_milestone: string;
days_until_next_milestone: string;
next_milestone_date: string;
}
interface GraphDataProp{
labels: string[];
datasets: number[];
}
export const getServerSideProps: GetServerSideProps = async (context) => {
const { slug } = context.params || {};
const chartData = await getGraphData(slug as string);
const channelData = await getChannelData(slug as string);
const sevenDayGraphData = await get7DGraphData(slug as string);
return {
props: {
chartData,
channelData,
slug,
sevenDayGraphData
},
};
};
function Page({ chartData, channelData, sevenDayGraphData, slug }: { chartData: GraphDataProp, channelData: ChannelDataProp, sevenDayGraphData: GraphDataProp, slug: string }) {
return (
<>
<Head>
<title>{slug as string} - PhaseTracker</title>
<meta property="og:title" content={`${slug as string} - PhaseTracker`}/>
<meta name="description" content={`Belonging to ${channelData.sub_org} with ${channelData.subscribers} subscribers`} />
<meta name="og:description" content={`${channelData.sub_org} - ${channelData.subscribers}`} />
<meta property="og:image" content={`${channelData.profile_pic}`}/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"></meta>
<meta name="author" content="Pinapelz"></meta>
</Head>
<TitleBar title={slug as string} redirectUrl="/" showHomeButton backgroundColor="black" />
<div className="flex justify-center">
<div className="flex flex-col items-center">
<ChannelCard
channel_id={channelData.channel_id}
name={channelData.channel_name}
avatarUrl={channelData.profile_pic}
subscriberCount={channelData.subscribers}
videoCount={channelData.video_count}
suborg={channelData.sub_org}
nextMilestone={channelData.next_milestone}
nextMilestoneDays={channelData.days_until_next_milestone}
nextMilestoneDate={channelData.next_milestone_date}
/>
</div>
</div>
<div className="px-48 mb-10 mt-10">
<div className="mb-12">
<DataChart overrideBGColor="black" overrideBorderColor="black" chartData={chartData}/>
</div>
<div className="mb-12">
<DataChart chartData={sevenDayGraphData} overrideBGColor="black" overrideBorderColor="black" graphTitle="7 Day Historical"/>
</div>
</div>
<Footer />
</>
);
}
async function getGraphData(slug: string){
const encodedSlug = encodeURIComponent(slug as string);
const apiUrl = process.env.NEXT_PUBLIC_API_URL
const response = await fetch(apiUrl+`/api/subscribers/${encodedSlug}`, {
headers: {
'Cache-Control': 'no-cache'
},
cache: 'no-cache'
});
if(!response.ok){
console.log(response.statusText);
}
return response.json();
}
async function getChannelData(slug: string){
const encodedSlug = encodeURIComponent(slug as string);
const apiUrl = process.env.NEXT_PUBLIC_API_URL
const response = await fetch(apiUrl+`/api/channel/${encodedSlug}`, {
headers: {
'Cache-Control': 'no-cache'
},
cache: 'no-cache'
});
if(!response.ok){
console.log(response.statusText);
}
return response.json();
}
async function get7DGraphData(slug: string){
const encodedSlug = encodeURIComponent(slug as string);
const apiUrl = process.env.NEXT_PUBLIC_API_URL
const response = await fetch(apiUrl+`/api/subscribers/${encodedSlug}/7d`, {
headers: {
'Cache-Control': 'no-cache'
},
cache: 'no-cache'
});
if(!response.ok){
console.log(response.statusText);
}
return response.json();
}
export default Page;
|
